<template>

  <section class="app-inner">

    <el-dialog
      :title="teachForm.title"
      :visible.sync="teachForm.flag"
      width="70%"
      modal
      center
      :show-close="true">
      <div style="position: relative;">
        <el-tabs v-model="activeName" class="el-tabs-root">
          <el-tab-pane label="基本信息" name="1" class="info-school-tab">
            <el-descriptions :column="3" class="left">
              <el-descriptions-item label="教职工名称">{{ schoolData.name || '--'}}</el-descriptions-item>
              <el-descriptions-item label="工号">{{ schoolData.number || '--'}}</el-descriptions-item>
              <el-descriptions-item label="联系方式">{{!isShow ? $options.filters.cellularPhone(schoolData.contact) : schoolData.contact || '--'}}</el-descriptions-item>
              <el-descriptions-item label="所属部门">{{ schoolData.deptName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="是否默认生成账号">{{ schoolData.isCreateAccountName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="账号">{{ schoolData.account || '--'}}</el-descriptions-item>
              <el-descriptions-item label="所属校区">{{ schoolData.schoolDistrictName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ schoolData.genderName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="国籍">{{ schoolData.nationalityName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="证件类型">{{ schoolData.cardTypeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="证件号码">{{ !isShow && schoolData.cardType === '1' ? $options.filters.idCarDesensitization(schoolData.idCard) :  schoolData.idCard || '--'}}</el-descriptions-item>
              <el-descriptions-item label="出生日期">{{ schoolData.birthday || '--'}}</el-descriptions-item>
              <el-descriptions-item label="岗位类别">{{ schoolData.positionTypeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="籍贯">{{ schoolData.nativePlaceName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="出生地">{{ schoolData.birthPlaceName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="婚姻状况">{{ schoolData.maritalStatusName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="民族">{{ schoolData.nationCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="政治面貌">{{ schoolData.politicsStatusName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="港澳台侨">{{ schoolData.compatriotCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="宗教信仰">{{ schoolData.religionCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="健康状况">{{ schoolData.healthCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="血型">{{ schoolData.bloodTypeCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="最高学历">{{ schoolData.educationBackgroundName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="最高学历获取学校或机构">{{ schoolData.graduateSchool || '--'}}</el-descriptions-item>
              <el-descriptions-item label="最高学位">{{ schoolData.lastDegreeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="最高学位获取学校或机构">{{ schoolData.lastDegreeSchool || '--'}}</el-descriptions-item>
              <el-descriptions-item label="参加工作年月">{{ schoolData.workDate || '--'}}</el-descriptions-item>
              <el-descriptions-item label="进入本校年月">{{ schoolData.hereDate || '--'}}</el-descriptions-item>
              <el-descriptions-item label="教职工来源">{{ schoolData.sourceCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="教职工类别">{{ schoolData.typeCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="是否在编">{{ schoolData.isAuthorized === 0 ? '是' : schoolData.isAuthorized === 1 ? '否' : '--' || '--'}}</el-descriptions-item>
              <el-descriptions-item label="用人性质">{{ schoolData.staffTypeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="合同性质">{{ schoolData.isSignName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="岗位等级">{{ schoolData.positionLevelName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="专业职务">{{ schoolData.dutyName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="在岗情况">{{ schoolData.positionStatusName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="户口性质">{{ schoolData.residenceCodeName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="户口所在地">{{ schoolData.residenceLocationName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="户口地址">{{ schoolData.residenceAddress || '--'}}</el-descriptions-item>
              <el-descriptions-item label="居住地址">{{ schoolData.currentResidentialAddress || '--'}}</el-descriptions-item>
            </el-descriptions>
            <div class="right">
              <el-image
                style="width: 100px; height: 100px"
                :src="`/gateway/api/basic/minio/getFileSource?fileName=${schoolData.imageUrl}`"
                :preview-src-list="[`/gateway/api/basic/minio/getFileSource?fileName=${schoolData.imageUrl}`]">
                <div slot="error" class="image-slot"></div>
              </el-image>
            </div>
          </el-tab-pane>
          <el-tab-pane label="同住人信息" name="2" class="school-honors" v-if="showAll">
            <div v-if="schoolData.togetherList && schoolData.togetherList.length > 0">
              <div v-for="item in schoolData.togetherList" :key="item.idNumber" class="together-row">
                <el-descriptions :column="2">
                  <el-descriptions-item label="姓名">{{ item.name || '--'}}</el-descriptions-item>
                  <el-descriptions-item label="联系方式">{{ item.mobile || '--'}}</el-descriptions-item>
                  <el-descriptions-item label="证件号码">{{ !isShow || schoolData.cardType === '1' ? idCarDesensitization(item.idNumber) : item.idNumber || '--' }}</el-descriptions-item>
                  <el-descriptions-item label="关系"  v-if="item.relation !== null">{{ item.relation || '--'}}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div v-else>暂无数据</div>
          </el-tab-pane>
          <el-tab-pane label="个人健康记录" name="3" class="school-honors" v-if="showAll">
            <div v-if="schoolData.healthRecords && schoolData.healthRecords.length > 0">
              <div v-for="item in schoolData.healthRecords" :key="item.dateTime" class="health-records-row">
                <span class="dateTime">{{item.dateTime}}</span>
                <span>{{item.text}}</span>
              </div>
            </div>
            <div v-else>暂无数据</div>
          </el-tab-pane>
        </el-tabs>
        <div class="switch-btn cursor iconfont" :class="[isShow ? 'icon-biyan': 'icon-yanjing']" @click="handleClickIsShow"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="close()" type="primary" class="btn-close">取消</el-button>
      </span>
    </el-dialog>
  </section>

</template>

<script>
export default {
  name: 'teachInfoForm',
  components: {},
  props: {
    teachForm: {
      type: Object
    },
    data: {
      type: Object
    },
    // 是否展示同住人信息和个人健康记录
    showAll: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    data: {
      deep: true,
      handler (newVal, oldVal) {
        this.schoolData = newVal
      }
    }
  },
  data () {
    return {
      isShow: false,
      activeName: '1',
      // 基础表单信息
      infoForm: {

      },
      // 教职工表单数据
      schoolData: {},
      content: '',
      isClear: false, // 清除富文本编辑器内容
      dialogImageUrl: '',
      dialogVisible: false,
      options: []
    }
  },
  methods: {
    close () {
      this.$emit('closeteachForm', false)
    },
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    idCarDesensitization (value) {
      return value ? value.replace(/^(.{6})(?:\d+)(.{3})$/, '$1********$2') : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.switch-btn{
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  position: absolute;
  right: 0;
  top: 5px;
}
  .app-inner {
    position: relative;
    .el-tabs-root {
      /deep/ {
        .el-tabs__content {
          height: 480px;
          overflow:auto;
        }
        .el-descriptions-item__container {
          display: flow-root;
        }
        .info-school-tab {
          display: flex;
          .left {
            flex: 4;
          }
          .right {
            flex: 1;
          }
        }
      }
    }
    .el-dialog--center .el-dialog__body {
      height: 620px;
    }
    .dialog-footer {
      position: absolute;
      bottom: 10px;
      .btn-close {
        margin-left: -100px;
      }
      .btn-preservation {
        margin-left: 100px;
      }
    }
    .together-row {
      border-bottom: 3px solid #f3f3ff;
      padding-top: 10px;
    }
    .health-records-row {
      line-height: 30px;
      .dateTime {
        margin-right: 10px;
      }
    }
  }
</style>
